<template>
    <n-form ref="formRef" :model="formData" :label-width="80" :rules="rules" label-placement="left">
        <n-form-item label="标题" path="name">
            <n-input v-model:value="formData.name" clearable :maxLength="20" />
        </n-form-item>
        <n-form-item label="链接" path="url">
            <n-input v-if="formData.isIframe === 'y'" v-model:value="formData.url" clearable :maxLength="20" />
            <n-tree-select v-else :options="toTreeOption(menuTree)" label-field="name" key-field="path" children-field="children"
                        v-model:value="formData.url" clearable />
        </n-form-item>
        <n-form-item label="颜色" path="color">
            <n-color-picker v-model:value="formData.color" :show-alpha="false" :swatches="[
            '#74b9ff',
            '#409EFF',
            '#55efc4',
            '#1abc9c',
            '#F0A020',
            '#e67e22',
            '#e74c3c',
            '#636e72'
            ]"/>
        </n-form-item>
        <n-form-item label="图标" path="icon">
            <icon-select v-model:value="formData.icon" :icons="icons"></icon-select>
        </n-form-item>
        <n-form-item label="是否外链" path="isIframe">

            <n-radio-group v-model:value="formData.isIframe" name="radiogroup">
                <n-space>
                    <n-radio v-for="item in yesOrNoOptions" :value="item.dictValue">{{item.name}}</n-radio>
                </n-space>
            </n-radio-group>
        </n-form-item>
        <n-form-item label="排序" path="sort">
            <n-input-number v-model:value="formData.sort" clearable />
        </n-form-item>
    </n-form>
    <n-space justify="center">
        <n-button @click="handleSubmitForm">确定</n-button>
        <n-button @click="handleCloseModal">取消</n-button>
    </n-space>
</template>

<script  setup lang='ts' >
import { FormInst, FormRules, NButton, NSpace, TreeOption } from 'naive-ui'
import { fetchRouterTree} from '@/service/api/sys/menu'
import { ref, toRefs,onMounted } from 'vue';
import { fetchAddLink, fetchUpdateLink } from '@/service/api/workbench/link'
import { QuickLink } from "./index"
import {icons} from "@/views/system/menu/index"

const menuTree = ref<DataSource[]>()
interface DataSource extends QuickLink { }
type Props = {
    formData: DataSource,
    yesOrNoOptions: any
}
const props = defineProps<Props>()
const formRef = ref<FormInst | null>(null)
const { formData } = toRefs(props)
const rules:FormRules = {
    name: [
        { required: true, message: "标题不能为空", trigger: "blur" }
    ],
    url: [
        { required: true, message: "链接不能为空", trigger: "blur" }
    ],
    isIframe: [
        { required: true, message: "排序不能为空", trigger: "blur" }
    ],
    sort: [
        {type:"number", required: true, message: "排序不能为空", trigger: "blur" }
    ]
}

const emit = defineEmits(["list", "close"])

function handleCloseModal() {
    emit("close")
}
function handleFetchResult(res: Service.RequestResult<unknown>) {
    if (!res.error) {
        handleCloseModal()
        window.$message?.success("操作成功！")
        emit("list")
    }
}
function handleSubmitForm() {
    formRef.value?.validate(e => {
        if (!e) {
            const value = formData.value
            if (value.id) {
                fetchUpdateLink(formData.value).then(handleFetchResult)
            } else {
                fetchAddLink(formData.value).then(handleFetchResult)
            }
        }
    })
}
function toTreeOption(val:DataSource[]|undefined):TreeOption[]|undefined{
	return val as unknown as TreeOption[]
}
async function getMenuTree() {
    const { data } = await fetchRouterTree()
    menuTree.value = data!
}
onMounted(() => {
    getMenuTree();
})
</script>

<style lang='scss' scoped>

</style>
